<template>
    <div class="page-wrap">
        <h2>基于element-ui开发的季度选择组件</h2>
        <h3>基本使用</h3>
        <div>
            <el-input type="textarea" :rows="2" placeholder="请输入内容" :value="code">
            </el-input>
        </div>
        <h3>参数</h3>
        <el-table :data="tableData" style="width: 100%" border>
            <el-table-column prop="name" label="参数" width="180">
            </el-table-column>
            <el-table-column prop="type" label="数据类型" width="180">
            </el-table-column>
            <el-table-column prop="description" label="说明">
            </el-table-column>
        </el-table>
        <h3 style="color: #409EFF;">效果</h3>
        <div class="flex-box">
            <div>季度：</div>
            <div>
                <el-quarter-picker v-model="nowQuarter" @change="onChange"></el-quarter-picker>
            </div>
        </div>
        <br>
    </div>
</template>


<script>
import elQuarterPicker from '@/components/el-quarter-picker.vue'
export default{
    components: {
        elQuarterPicker
    },
    data(){
        return {
            nowQuarter: "2024-Q2",

            code: `<el-quarter-picker v-model="nowQuarter"></el-quarter-picker>`,
            tableData: [
                {
                    name: "value", type: "String",
                    description: "当前季度的值，例如 2024-Q2"
                },
                {
                    name: "size", type: "Number",
                    description: "控件大小"
                },
                {
                    name: "@change", type: "Function",
                    description: "选择季度事件"
                },
            ]
        }
    },
    methods: {
        onChange(){
            console.log(this.nowQuarter)
        }
    }
}
</script>


<style scoped>
.page-wrap{
    padding: 20px;
}
.page-wrap h2{
    margin-top: 0;
}
.flex-box{
    display: inline-flex;align-items: center;
    margin: 0 auto;
}
</style>
